<?php get_header() ?>
<?php
global $wpdb;
$user = $wpdb->get_row("SELECT * FROM ap_painting_user WHERE user_id = {$_SESSION['user_id']}");
?>


<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/kinetic-v4.6.0.min.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url'); ?>/css/skins/tango/skin.css" />
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/jqdialog/jqdialog.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url'); ?>/js/jqdialog/jqdialog.css"/>
<link href="<?php echo bloginfo('template_url'); ?>/css/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="<?php echo bloginfo('template_url'); ?>/js/colorpicker/jquery.colorPicker.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/js/colorpicker/colorPicker.css" type="text/css" />
<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/reveal.css" type="text/css" />
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/jquery.reveal.js"></script>
<script type="text/javascript">

    /* facebook share */
    window.fbAsyncInit = function() {
        FB.init({appId: "185856284953433", status: true, cookie: true});
        // *** here is my code ***
        /*  if (typeof facebookInit == 'function') {
         facebookInit();
         } */
    };

    (function(d) {
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement('script');
        js.id = id;
        js.async = true;
        js.src = '//connect.facebook.net/en_US/all.js';
        ref.parentNode.insertBefore(js, ref);
    }(document));

	
    var mask = new Image();
    var maskm = new Image();
    var maskb = new Image();
    var tempImg = new Image();
    function uploadfile(currele) {
        mask = new Image();
        maskm = new Image();
        maskb = new Image();
        var src = base_url + "images/mask/" + currele.attr('alt') + ".png";
        var srcm = base_url + "images/mask/" + currele.attr('alt') + "m.png";
        var srcb = base_url + "images/mask/" + currele.attr('alt') + "b.png";
        mask.src = src;
        maskm.src = srcm;
        maskb.src = srcb;
    }
    /* END FB SHARE */
</script>
<div class="content tranhtai" >
    <div class="mainimg"> 

        <!-- CHO NAY DE LOAD ALBUM, IMAGE TE LE --> 
        <div id="albumfuck" ></div>

        <!--- CHO NAY DE VE LUNG TUNG --> 
        <div id="canvasHidden" style="display:none;"></div>
        <div id="canvasDiv"></div>
        <div id="canvasDiv2"></div>
        <!--[if IE]><script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/excanvas.js"></script><![endif]-->
        <script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/html5-canvas-drawing-app.js"></script>
        <script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/shape.js"></script>
        <script type="text/javascript">
            var editing = false;
            var iszoom = false;
            var outcanvas = false;
            var folderflag = true;
            $(document).ready(function() {
                prepareCanvas();
                curTool = "open";
                outlineImage.src = base_url + "images/background/coloring_1.jpg";
                $('#canvas').css('cursor', 'default');

            });
        </script>
    </div>
</div>
<div class="tt-control">
    <a href="javascript:;" id="newimg"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-choilai.png" /></a>
    <a href="javascript:void(0)" onclick="switch_layer();saveimg2db();">
        
        <img src="<?php echo bloginfo('template_url'); ?>/img/btn-hoantat.png" /></a>
    <a href="<?php echo home_url('album') ?>"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-album.png" /></a>
    <a href="#"  class="big-link" data-reveal-id="myModal"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-share.png" /></a>
</div>
<div class="tt-toolbar">
    <div class="tool-1" data="1">
        <div><a href="javascript:;"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-hinhnen.png" /></a></div>
        <div>
            <ul id="mycarousel" class="jcarousel-skin-tango">
                <?php
                for ($i = 1; $i <= 6; $i++) {
                    $nameimg = "coloring_{$i}";
                    $img = "coloring_{$i}.jpg";
                    ?>
                    <li><img alt="<?php echo $nameimg ?>" src="<?php echo bloginfo('template_url'); ?>/images/thumb/<?php echo $img ?>" width="55" height="50" alt="" /></li>
                <?php } ?>  
            </ul>
        </div>
    </div>
    <div class="tool-2" data="2">
        <div><a href="javascript:;"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-taianh.png" /></a></div>
        <div>
            <ul id="mycarousel2" class="jcarousel-skin-tango">
                <?php
                for ($i = 1; $i <= 5; $i++) {
                    $nameimg = "mask{$i}";
                    $img = "mask{$i}.png";
                    ?>
                    <li><img onclick="uploadfile(jQuery(this));
                    $('#uploadimage').click();" alt="<?php echo $nameimg ?>" src="<?php echo bloginfo('template_url'); ?>/images/mask/<?php echo $img ?>" width="55" height="50" alt="" /></li>
                    <?php } ?>  
            </ul>
            <form style="display:none;" id="shape_form"><input type='file' name='img' size='65' id='uploadimage' style="display:none;" /></form>
        </div>
    </div>
    <div class="tool-3" data="3">
        <div><a href="javascript:;"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-trangtri.png" /></a></div>
        <div>
            <ul id="mycarousel3" class="jcarousel-skin-tango">
                <?php
                for ($i = 1; $i <= 20; $i++) {
                    $nameimg = "item{$i}";
                    $img = "item{$i}.png";
                    ?>
                    <li><img alt="<?php echo $nameimg ?>" src="<?php echo bloginfo('template_url'); ?>/images/item/<?php echo $img ?>" width="55" height="50" alt="" /></li>
                <?php } ?>  
            </ul>
        </div>
    </div>
    <div class="tool-4" data="4">
        <div><a href="javascript:;"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-nhaptext.png" /></a></div>
        <div>
            <div>
                <p class="font font-1 active" data="1">Font 1</p>
                <p class="font font-2" data="2">Font 2</p>
                <p class="font font-3" data="3">Font 3</p>
                <p class="font font-4" data="4">Font 4</p>
                <p class="font font-5" data="5">Font 5</p>
                <p class="font font-6" data="6">Font 6</p>
                <p class="font font-7" data="7">Font 7</p>
            </div>
            <p class="color" id="mycarousel4">
                <?php 
                $color_array = array(
                    'ffffff', 'e9e9e9', 'c0c0c0',
                    '966d6c', '674140', '422928',
                    'fdf78c', 'ffea01', 'bbbe01',
                    'f5e200', 'f0c101', 'a38001',
                    'fd9524', 'f2651e', 'b73902',
                    'fca2ae', 'ff7688', 'e8334e',
                    'fe64d9', 'f325c7', 'c7009b',
                    'f7524c', 'df1710', 'b01700',
                    '99cc53', '7eb130', '40760b',
                    '01a368', '017755', '004733',
                    '08b9ff', '0286c6', '005189',
                    'b638eb', '7811a1', '4a015b',
                    '0047ac', '07316d', '01143c',
                    '3f3d3e', '1f1f1f', '000000'
                );
                foreach($color_array as $key=>$value){
                ?>
                <span class="color-<?php echo $key+1 ?>" data="#<?php echo $value ?>"></span>
                <style type="text/css">
                    .tt-toolbar .color-<?php echo $key+1 ?>{
                      background: #<?php echo $value ?>;
                    }
                    .tt-toolbar .tcolor-<?php echo $key+1 ?> .font, .input-text textarea.color-<?php echo $key+1 ?>{
                      color: #<?php echo $value ?> !important;
                    }
                </style>
                <?php } ?>
            </p>
        </div>
    </div>
</div>
<div id="review" ele="show" onclick="review();"><img src="<?php echo bloginfo('template_url'); ?>/img/xem_truoc.png" /></div>
<script type="text/javascript">
			//review ecard 
                function review(){
                    if(jQuery('#review').attr('ele') == 'hide'){
                        clearCanvasTransparent();
                        context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
                        context.beginPath();
                        context.rect(padding[3], padding[0], canvasWidth - (padding[1]+padding[3]), canvasHeight - (padding[0]+padding[2]));
                        context.lineWidth = 2;
                        context.globalAlpha=0.4;
                        context.strokeStyle = '#fffeff';
                        context.stroke();
                        context.globalAlpha=1;
                        jQuery('#review').attr('ele','show');
                        jQuery('#review img').attr('src','<?php echo bloginfo("template_url"); ?>/img/xem_truoc.png');
                        jQuery('.tt-toolbar').show();
                        jQuery('.tt-control').show();
                    }else{
                        clearCanvasTransparent();
                        context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
                        reset_choose_shape();
                        jQuery('#review').attr('ele','hide');
                        jQuery('#review img').attr('src','<?php echo bloginfo("template_url"); ?>/img/exit.png');
                        jQuery('.tt-toolbar').hide();
                        jQuery('.tt-control').hide();
                    }
                }
            // end review ecard 
			
			
            var toolChoose = 0;
            $('.tt-toolbar > div > div:first-child').live('click', function() {
                var curChoose = $(this).parent().attr('data');
                if (curChoose != toolChoose) {
                    $('.tt-toolbar > div.tool-' + toolChoose + ' > div:last-child').slideUp();
                    $(this).next().slideDown();
                    toolChoose = curChoose;
                    if (toolChoose == 1) {
                        curTool = 'hinhnen';
                    }
                    if (toolChoose == 2) {
                        curTool = 'taianh';
                    }
                    if (toolChoose == 3) {
                        curTool = 'trangtri';
                    }
                    if (toolChoose == 4) {
                        curTool = 'nhaptext';
                    }
                    reset_choose_shape();
                }
            });
            $('.tt-toolbar .font').live('click', function() {
                $('.tt-toolbar .font').removeClass('active');
                $(this).addClass('active');

                if (!$('.input-text').hasClass('active') && choose_shape == '') {
                    $('.input-text').addClass('active');
                    $('.input-text textarea').val('Insert Text Here...');
					$('.font-size').val('26');
                    $('.input-text').fadeIn();
                }
                $('.input-text textarea').attr('class', $('.tt-toolbar .color span.active').attr('class').replace('active', '') + ' ' + $('.tt-toolbar .font.active').attr('class').replace('active', '').replace('font', ''));
                if (choose_shape != '') {
                    update_text();
                    return;
                }
            });
            $('.tt-toolbar .color span').live('click', function() {
                shapeColor = $(this).attr('data');
                if (choose_shape != '' && (curTool == 'taianh' || curTool == 'nhaptext')) {
                    var shape = layer.get('.' + choose_shape)[0];
                    shape.setFill(shapeColor);
                    layer.draw();
                }
                curColor = convertHex($(this).val());
                $('.tt-toolbar .color span').removeClass('active');
                $(this).addClass('active');

                $('.font').parent().attr('class', 't' + $(this).attr('class').replace('active', ''));
                if ($('.input-text').hasClass('active')) {
                    $('.input-text textarea').attr('class', $('.tt-toolbar .color span.active').attr('class').replace('active', '') + ' ' + $('.tt-toolbar .font.active').attr('class').replace('active', '').replace('font', ''));
                }
                if (choose_shape != '') {
                    update_text();
                    return;
                }
            });
            $('.input-text .btn-chen').live('click', function() {
                $('.input-text').fadeOut('fast', function() {
                    update_text();
                    $('.input-text').removeClass('active');
                });
            });
            $('.input-text .btn-huy').live('click', function() {
                $('.input-text').fadeOut('fast', function() {
                    $('.input-text').removeClass('active');
                });
            });
            $(document).ready(function() {
                $('.tt-toolbar .color span.color-5').click();
                $('.tt-toolbar > div:first-child > div:first-child').click();
            });
</script>
<div class="input-text">
    <textarea></textarea>
	<input type="text" class="font-size" value="" />
    <a href="javascript:;" class="btn-chen">Chèn</a>
    <a href="javascript:;" class="btn-huy">Hủy</a>
</div>
<div id="latestimg" style="display: none"></div>
<div id="latestimgid" style="display: none"></div>

<input type="hidden" id="imgidhidden" value="">
<input type="hidden" id="layoutimg" value="">

<script type="text/javascript">
    function reset_choose_shape() {
        choose_shape = '';
        layer.draw();
        paint = false;
        $('.input-text').fadeOut('fast', function() {
            $('.input-text').removeClass('active');
        });
    }
    function update_text() {
        var text = $('.input-text textarea').val();
        var font = $('.tt-toolbar .font.active').attr('class').replace('active', '').replace('font', '');
        if ($.trim(font) == 'font-1')
            font = 'UTMAndrogyne';
        if ($.trim(font) == 'font-2')
            font = 'UTMSwashes';
        if ($.trim(font) == 'font-3')
            font = 'UTMViceroyJF';
        if ($.trim(font) == 'font-4')
            font = 'UVNAiCap';
        if ($.trim(font) == 'font-5')
            font = 'UVNBanTay';
        if ($.trim(font) == 'font-6')
            font = 'UVNKyThuat';
        if ($.trim(font) == 'font-7')
            font = 'UVNMauTim1';
        var color = $('.tt-toolbar .color span.active').attr('data');
		var font_size = $('.font-size').val();
        draw_text(text, font, color, font_size);
    }
    function switchgalery($k) {
        jQuery('.gallery').hide();
        jQuery('#exam_' + $k).fadeIn();
    }

    function loadfimg($albumid) {
        $.blockUI({css: {
                border: 'none',
                padding: '15px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .5,
                color: '#fff'
            }});
        jQuery.post("<?php echo site_url('/') ?>album/?detail=" + $albumid, function($data) {
            jQuery('#albumfuck').html($data);
            if (jQuery('#ftoolbarx').css('bottom') === '0px') {
                jQuery('#color_selector').css('z-index', '-9999');
            }
            switchimg('ele_0');
            folderflag = false; // disable folder button 
            $.unblockUI();
            function loadfimg($albumid) {
                jQuery.post("<?php echo site_url('/') ?>album/?detail=" + $albumid, function($data) {
                    jQuery('#albumfuck').html($data);

                });
            }
        });
    }

    function saveimg2db() {
        var dataURL = canvas.toDataURL("image/png");
        $.blockUI({css: {
                border: 'none',
                padding: '15px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .5,
                color: '#fff'
            }});
        $.ajax({
            type: "POST",
            url: "<?php echo site_url() ?>/save-image",
            data: {
                imgBase64: dataURL
            },
			dataType : 'json'
        }).done(function(data) {
			
            jQuery('#latestimg').html(data.imgurl);
			jQuery('#latestimgid').html(data.imgid);
            editing = false;
            $.unblockUI();
            /* $('#canvas').remove();
            prepareCanvas();
            curTool = "open";
            outlineImage.src = base_url + "images/background/coloring_1.jpg";
            $('#canvas').css('cursor', 'default');*/
			$('.tt-toolbar').hide();
        });
    }

    function mysaveimg2db() {
		picture = jQuery('#latestimg').html();
		
			link = 'https://www.facebook.com/www.ebom.vn/app_185856284953433?app_data={"imgid":' + jQuery('#latestimgid').html() + '}'; 
			
			friend_url = jQuery('#friend_url').val();  
			friend_name = jQuery('#friend_name').val(); 
			friend_email = jQuery('#friend_email').val();
			
			jQuery('.close-reveal-modal').click(); // close popup
			
			
				$.blockUI({ css: {
					border: 'none',
					padding: '15px',
					backgroundColor: '#000',
					'-webkit-border-radius': '10px',
					'-moz-border-radius': '10px',
					opacity: .5,
					color: '#fff'
				}});
			//email to friend 
			if(friend_email != '') {
				
				jQuery.post('<?php echo home_url('send_email') ?>',{email: friend_email, img_url : picture, friend_name : friend_name}, function(){
					if(friend_url == '') 
					$.unblockUI();
				});
			}
			// share to wall friend
			if(friend_url != '' ) {
				
				from_id = '<?php echo $_SESSION['user_id'] ?>';
				jQuery.post('<?php echo home_url('friend') ?>',{friend_url: friend_url}, function(friend_data){
					
					if(friend_data.id){
					FB.ui( {
							method: 'feed',
							link: link,
							picture: picture,
							name: 'Triumph - Rực rỡ giáng sinh, tưng bưng năm mới',
							caption: '<?php echo $user->name ?>',
							description: 'Lòng rộn ràng bao yêu thương muốn nói.Nhờ cánh thiệp trao gửi những dấu yêu, Cho bốn mùa về ngập tràn hạnh phúc!',
							to: friend_data.id,
							from: from_id    
						   },    
						  function (response) {
							  if (response && response.post_id) {
								alert('Bạn đã chia sẻ hình thành công');
							  } else {
								alert('Đã xảy ra sự cố, không chia sẻ được hình ảnh');
							  }    
							 }  
						);
					}else{
						alert (" Đường dẫn facebook của bạn không chính xác "); 
					}
				},'json');
			}
			
			$.unblockUI();
		
        
    }
    
    function saveImage() {
        $urllink = "<?php echo site_url() ?>/save-image";
        $reload = false;

        var dataURL = canvas.toDataURL("image/png");
        $.blockUI({css: {
                border: 'none',
                padding: '15px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .5,
                color: '#fff'
            }});
        $.ajax({
            type: "POST",
            url: $urllink,
            data: {
                imgBase64: dataURL,
                imgid: jQuery('#imgidhidden').val(),
                layoutimg: jQuery('#layoutimg').val()
            },
			dataType : 'json'
        }).done(function(url) {
            jQuery('#latestimg').html(url);
            $.unblockUI();
            editing = false;

        });
    }
    function loadexam() {
        $.blockUI({css: {border: 'none', padding: '15px', backgroundColor: '#000', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: .5, color: '#fff'}});

        if (jQuery('#albumfuck').css('display') === 'none') {
            jQuery('#canvasDiv').hide();
            jQuery.post('<?php echo site_url() ?>/album', function($data) {
                jQuery('#albumfuck').html($data);
                jQuery('#albumfuck').fadeIn();
                outcanvas = true;
                jQuery('#lialbum').addClass('active');
                $.unblockUI();
            });

        } else {
            jQuery('#albumfuck').hide();

            $('#canvas').remove();
            editing = false;
            prepareCanvas();
            outlineImage.src = base_url + "images/watermelon-duck-outline.png";
            $('.centerel img').click();
            $.unblockUI();

        }
    }
    function convertHex(hex) {
        hex = hex.replace('#', '');
        _r = parseInt(hex.substring(0, 2), 16);
        _g = parseInt(hex.substring(2, 4), 16);
        _b = parseInt(hex.substring(4, 6), 16);

        result = {
            r: _r,
            g: _g,
            b: _b
        }
        return result;
    }
    function draw(ev) {
        var img = new Image(),
                f = document.getElementById("uploadimage").files[0],
                url = window.URL || window.webkitURL,
                src = url.createObjectURL(f);

        img.src = src;
        img.onload = function() {
            reset_choose_shape();
            var maskWidth = mask.width;
            var maskHeight = mask.height;
            var img_width = img.width;
            var img_height = img.height;
            if (img.width != maskWidth || img.height != maskHeight) {
                var radio_img_w = img.width / maskWidth;
                var radio_img_h = img.height / maskHeight;
                if (radio_img_w < radio_img_h) {
                    img_width = maskWidth;
                    img_height = img.height / radio_img_w;
                } else {
                    img_height = maskHeight;
                    img_width = img.width / radio_img_h;
                }
            }
            var tempImg = merge_mask(img, mask, maskm, maskb, img_width, img_height);
            tempImg.onload = function() {
                draw_mask_image(img, mask, maskm, maskb, tempImg);
            }
            url.revokeObjectURL(src);
            document.getElementById('shape_form').reset();
        }
    }
    document.getElementById("uploadimage").addEventListener("change", draw, false);

    jQuery(document).ready(function() {
        jQuery('#mycarousel').slimscroll({
            width: '105px',
            height: '240px',
            railVisible: true,
            alwaysVisible: true,
            railColor: '#eee',
            opacity: 1,
            color: '#fff'
        });
        jQuery('#mycarousel2').slimscroll({
            width: '105px',
            height: '240px',
            railVisible: true,
            alwaysVisible: true,
            railColor: '#eee',
            opacity: 1,
            color: '#fff'
        });
        jQuery('#mycarousel3').slimscroll({
            width: '105px',
            height: '240px',
            railVisible: true,
            alwaysVisible: true,
            railColor: '#eee',
            opacity: 1,
            color: '#fff'
        });
        jQuery('#mycarousel4').slimscroll({
            width: '105px',
            height: '60px',
            railVisible: true,
            alwaysVisible: true,
            railColor: '#eee',
            opacity: 1,
            color: '#fff'
        });
        jQuery('#mycarousel img').click(function() {
            var currele = jQuery(this);
            outlineImage.src = base_url + "images/background/" + jQuery(this).attr('alt') + ".jpg";
            outlineImage.onload = function() {
                clearCanvasTransparent();
                context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
                context.beginPath();
                context.rect(padding[3], padding[0], canvasWidth - (padding[1] + padding[3]), canvasHeight - (padding[0] + padding[2]));
                context.lineWidth = 2;
                context.strokeStyle = '#fffeff';
                context.stroke();
                colorLayerData = context.getImageData(0, 0, canvasWidth, canvasHeight);
                resourceLoaded();

            };
            jQuery('#layoutimg').val(base_url + "images/background/" + currele.attr('alt') + ".jpg");
        });
        jQuery('#mycarousel3 img').click(function() {
            var currele = jQuery(this);
            insert_image = true;
            var img = new Image(), src = base_url + "images/item/" + currele.attr('alt') + ".png";

            img.src = src;
            img.onload = function() {
                draw_insert_image(img);
            }
        });
        jQuery('#newimg').click(function() {
		/*
            if (editing) {
                // confirm dialog
                $.jqDialog.confirm("Bạn có muốn lưu thiệp lại không?",
                        function() {
                            switch_layer();
                            saveimg2db();
                        }, // callback function for 'YES' button
                        function() {
                            editing = false;
                            switch_layer();
                            $('#canvas').remove();
                            prepareCanvas();
                            curTool = "open";
                            outlineImage.src = base_url + "images/background/coloring_1.jpg";
                            $('#canvas').css('cursor', 'default');
                        }      // callback function for 'NO' button
                );
            } else { */
                editing = false;
                switch_layer();
                $('#canvas').remove();
                prepareCanvas();
                curTool = "open";
                outlineImage.src = base_url + "images/background/coloring_1.jpg";
                $('#canvas').css('cursor', 'default');
           // }
			$('.tt-toolbar').show();
        });

    });
</script>
        <div id="myModal" class="reveal-modal inforform">
                    <form id="fkingform">
                    <ul>
                       
                        <li>
                            <input type="text" name="email" id="friend_email"  value="" placeholder="Email" />
                        </li>
                        <li>
                            <input type="text" name="email" id="friend_url" value ="" placeholder="Link Facebook" />
                        </li>
                        <li>
						   <input class="sendbt" onclick="mysaveimg2db()"  type="button" value="Gửi" />
                        </li>
                    </ul>
                        </form>
                    <a style="display: none" class="close-reveal-modal">&#215;</a>
        </div>
		<div class="music">
			<a href="javascript:;" class="volumn"><img src="<?php echo bloginfo('template_url'); ?>/img/vol-on.png"></a>
			<!--  <span class="songname">Last Christmas ...</span> --> 
			 <div id="songhere"></div>
		</div>
		
		<script type="text/javascript">
    var music = '<EMBED src="https://www.vietbuzzad.net/triumphecard/lastchristmas.mp3" hidden="true" id="musicplayer" autostart="true" loop="infinite" height=0 width=0></EMBED>';
        // var status = getCookie("music"); 
        <?php if(isset($_SESSION['music'])&&$_SESSION['music']=='false'){ ?>
            $('.volumn').addClass('off');
            $('.volumn').find('img').attr('src','<?php echo bloginfo('template_url'); ?>/img/vol-off.png');
        <?php }else{ ?>
            $('#songhere').html(music);
            $('.volumn').removeClass('off');
            $('.volumn').find('img').attr('src','<?php echo bloginfo('template_url'); ?>/img/vol-on.png');
        <?php } ?>
        
        $('.volumn').live('click',function(){
            if(!$(this).hasClass('off')){
                $(this).addClass('off');
                $(this).find('img').attr('src','<?php echo bloginfo('template_url'); ?>/img/vol-off.png');
                $('#songhere').html('');
                setSession(false);
                // setCookie('music','disable');
            }else{
                $(this).removeClass('off');
                $(this).find('img').attr('src','<?php echo bloginfo('template_url'); ?>/img/vol-on.png');
                $('#songhere').html(music);
                setSession(true);
                // setCookie('music','enable');
            }
        });
    //$('.volumn').click();
</script>
<?php get_footer() ?>